"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { Heart, MoreHorizontal, Play } from "lucide-react"
import { Button } from "@/components/ui/button"

interface SearchSongsListProps {
    query: string
    limit?: number
    showHeader?: boolean
}

export function SearchSongsList({ query, limit = 20, showHeader = false }: SearchSongsListProps) {
    const [songs, setSongs] = useState<any[]>([])
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        const fetchData = async () => {
            try {
                setIsLoading(true)
                // 这里应该是真实的API调用，这里用模拟数据

                // 模拟数据
                if (query) {
                    setTimeout(() => {
                        const mockSongs = Array(limit)
                            .fill(0)
                            .map((_, i) => ({
                                id: `song-${i}`,
                                title: i % 3 === 0 ? `${query}·心中的日月` : i % 3 === 1 ? `${query}·改变自己` : `${query}·心跳`,
                                artist: query,
                                album: "精选集",
                                duration: "03:45",
                                isVip: i % 2 === 0,
                                isPremium: i % 3 === 0,
                                isPreview: true,
                                image: "/placeholder.svg?height=80&width=80",
                            }))
                        setSongs(mockSongs)
                        setIsLoading(false)
                    }, 500)
                } else {
                    setSongs([])
                    setIsLoading(false)
                }
            } catch (error) {
                console.error("Error fetching songs:", error)
                setIsLoading(false)
            }
        }

        fetchData()
    }, [query, limit])

    if (isLoading || songs.length === 0) return null

    return (
        <div className="mb-8">
            {showHeader && (
                <div className="flex justify-between items-center mb-4">
                    <h2 className="text-xl font-bold">单曲</h2>
                    <Link href={`/search?q=${encodeURIComponent(query)}&tab=songs`} className="text-sm text-primary">
                        查看全部
                    </Link>
                </div>
            )}

            {showHeader && (
                <div className="mb-4">
                    <Button className="rounded-full">
                        <Play className="mr-2 h-4 w-4" /> 播放全部
                    </Button>
                </div>
            )}

            <div className="space-y-2">
                {songs.map((song) => (
                    <div key={song.id} className="flex items-center p-2 rounded-lg hover:bg-accent">
                        <div className="flex-shrink-0 mr-4">
                            <Image
                                src={song.image || "/placeholder.svg"}
                                alt={song.title}
                                width={56}
                                height={56}
                                className="rounded"
                            />
                        </div>
                        <div className="flex-1 min-w-0">
                            <div className="flex items-center">
                                {song.isVip && (
                                    <span className="inline-block px-1 text-xs text-primary border border-primary rounded mr-1">VIP</span>
                                )}
                                {song.isPremium && (
                                    <span className="inline-block px-1 text-xs text-amber-500 border border-amber-500 rounded mr-1">
                    精品母带
                  </span>
                                )}
                                {song.isPreview && (
                                    <span className="inline-block px-1 text-xs text-green-500 border border-green-500 rounded mr-1">
                    试听
                  </span>
                                )}
                                <h3 className="font-medium truncate">{song.title}</h3>
                            </div>
                            <p className="text-sm text-muted-foreground truncate">
                                {song.artist} · {song.album}
                            </p>
                        </div>
                        <div className="flex items-center space-x-4 ml-2">
                            <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Heart className="h-5 w-5" />
                            </Button>
                            <Button variant="ghost" size="icon" className="h-8 w-8">
                                <MoreHorizontal className="h-5 w-5" />
                            </Button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

